<template>
  <div>
    <div class="box">
      <h4>商品 - 大衣</h4>
      <!-- 如果是元素的dom事件， $event 表示事件对象 -->
      <h5>价格 - 99 元</h5>
      <!-- 需求：将下面的数字加减框，封装成一个通用的组件 -->
      
      <!-- 这里组件上的@input 是我们自定义的事件 -->
      <!-- $event -> 作为形参接收 自定义事件传过来的第一个参数 -->
      <number-box :value="count" @input="count = $event"></number-box>
      <number-box :value="count" @input="handleInput"></number-box>

      <!-- v-model底层 ==> :value + @input -->
      <number-box v-model="count"></number-box>
    </div>
  </div>
</template>
<script>
import NumberBox from './components/NumberBox.vue'
export default {
  data(){
    return {
      count:10
    }
  },
  methods:{
    handleInput(val){
      this.count = val
    }
  },
  components: {
    NumberBox
  },
  props: {},
}
</script>

<style>
  .box{
    border:1px solid skyblue;
    width:200px;
    height:200px;
    margin:10px;
    padding:10px
  }

</style>